<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在租用</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="css/webbase.css">
    <style>
        body {
            background-color: #f5f5f5;
            color: #333;
            font-family: Arial, sans-serif;
        }

        .rental-container {
            max-width: 1000px;
            margin: 20px auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .rental-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .rental-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ddd;
            padding: 10px 0;
        }

        .rental-item:last-child {
            border-bottom: none;
        }

        .game-info {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .game-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .game-info img {
            width: 200px;
            margin-right: 20px;
            border-radius: 5px;
        }

        .game-details {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .game-details p {
            width: 50%;
            margin: 0;
            padding: 5px 0;
        }

        .actions {
            text-align: right;
        }

        .actions button {
            margin: 5px;
        }

        .description {
            width: 100%;
            margin-top: 20px;
            padding: 5px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }

        .description-content {
            width: 100%;
            word-wrap: break-word;
            /* 允许长单词换行 */
            white-space: pre-line;
            /* 保留换行符，但合并空格 */
            line-height: 1.6;
            /* 行高 */
            padding: 10px 0;
            font-size: 14px;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<div id="app">
    <app-header></app-header>
    <div class="rental-container">
        <h2 class="rental-header">游戏详情</h2>
        <div class="rental-item">
            <div class="game-info" v-cloak>
                <div class="game-header">
                    <img :src="game.imageUrl" alt="..." v-cloak>
                    <div class="game-details">
                        <p>游戏名称: {{ game.name }}</p>
                        <p>账号总数: {{ game.totalAccounts }}</p>
                        <p>分类: {{ getCategoryText(game.category) }}</p>
                        <p>可用账号数: {{ game.availableAccounts }}</p>
                    </div>
                    <div class="actions">
                        <el-button type="primary" @click="toRental">立即租用</el-button>
                    </div>
                </div>
                <div class="description">
                    <strong>游戏描述:</strong>
                    <div class="description-content">{{ game.description }}</div>
                </div>
            </div>
        </div>
        <el-dialog title="订单信息" :visible.sync="formVisible" width="30%" style="padding: 0 20px;">
            <div style="color: #E6A23C; margin-bottom: 15px;">
                <i class="el-icon-warning"></i>
                提示：租号后需要游玩30分钟才可以更换其他游戏或账号
            </div>
            <div style="color: #E6A23C; margin-bottom: 15px;">
                <i class="el-icon-warning"></i>
                提示：初次租号和延长租号时间为24小时
            </div>
            <el-form :model="rentalObj" size="small" label-position="left">
                <el-form-item label="可租账号">
                    <el-select v-model="rentalObj.gameAccountId" filterable placeholder="请选择租用账号">
                        <el-option v-for="(item ,index) in accountList" :label="item.gameAccount"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/top.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                game: {},
                formVisible: false,
                rentalObj: {
                    userId: null,           // 用户ID
                    gameAccountId: null,    // 账号ID
                    gameId: null,           // 游戏ID
                    startTime: new Date(),        // 租用开始时间（可以是一个时间戳或者 ISO 格式日期）
                    endTime: new Date(),          // 租用结束时间（同上）
                    status: 1,           // 租用状态 1 进行中 0 已结束
                    name: '',             // 游戏名称
                    account: '',
                    userName: ''
                },
                accountList: []
            }
        },
        methods: {
            async getUserName() {
                const response = await axios.get('/com/checkLogin')
                if (response.data.success) {
                    this.rentalObj.userName = response.data.data;
                }
            },
            async queryAccount() {
                const res = await axios.get('/com/gameAccount/page', {
                    params: {
                        pageNo: 1,
                        pageSize: 999999,
                        status: 0,
                        gameId: this.game.id
                    }
                })
                this.accountList = res.data.records
            },
            async saveOrUpdate() {
                await this.getUserName()
                this.rentalObj.gameId = this.game.id
                this.rentalObj.name = this.game.name
                this.rentalObj.endTime.setTime(new Date().getTime() + 86400000); // 当前时间加一天
                try {
                    const res = await axios.post('/rentals/saveOrUpdate', this.rentalObj)
                    const {code, msg} = res.data
                    if (code != 200) {
                        if (res.request.responseURL.indexOf('login.html') != -1) {
                            this.$message({
                                type: 'error',
                                message: "未登入或权限不足"
                            })
                            return
                        }
                        this.$message({
                            type: 'error',
                            message: msg
                        })
                        return
                    }
                    this.$message({
                        type: 'success',
                        message: '租用成功'
                    })
                    this.formVisible = false
                    window.location.href = '/my-rentals.html'
                } catch (e) {
                    if (e == "Error: Request failed with status code 403") {
                        this.$message.error("无操作权限");
                    }
                }
            },
            toRental() {
                this.formVisible = true
                this.$nextTick(async () => {
                    await this.queryAccount()
                })
            },
            async init() {
                const params = new URLSearchParams(window.location.search)
                const id = params.get('id')
                const res = await axios.get('/game/get', {
                    params: {
                        id: id
                    }
                })
                this.game = res.data.data
            },
            stopRental(rentalId) {
                // 停止租用逻辑
                console.log('停止租用:', rentalId);
            },
            extendRental(rentalId) {
                // 延长租号逻辑
                console.log('延长租号:', rentalId);
            },
            changeGame(rentalId) {
                // 更换游戏逻辑
                console.log('更换游戏:', rentalId);
            },
            getCategoryText(category) {
                switch (category) {
                    case '1':
                        return '低级游戏';
                    case '2':
                        return '高级游戏';
                    default:
                        return '未知类别';
                }
            },
        },
        created() {
            this.init()
        }
    });
</script>
</body>

</html>